import * as React from 'react';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { Icon } from 'react-native-elements'

import HomeScreen from '~/views/home/index'
import UserScreen from '~/views/user/index'
import ChatScreen from '~/views/chat/index'

const Tab = createBottomTabNavigator();

function TabNavigator() {
  return (
    <Tab.Navigator
      initialRouteName="HomeScreen"
      tabBarOptions={{
        showLabel: false
        // style: {
        //   position: 'absolute',
        //   right: 0,
        //   bottom: 0,
        //   left: 0,
        //   backgroundColor: 'transparent'
        // },
      }}>

      <Tab.Screen
        name="HomeScreen"
        component={HomeScreen}
        options={{
          tabBarLabel: '首页',
          tabBarIcon: ({color}) => (
            <Icon type="ionicon" name="home" color={color} size={26} />
          ),
        }}
      />

      <Tab.Screen
        name="ChatScreen"
        component={ChatScreen}
        options={{
          tabBarLabel: '消息',
          tabBarIcon: ({color}) => (
            <Icon type="ionicon" name="chatbubble-ellipses-outline" color={color} size={26} />
          ),
        }}
      />

      <Tab.Screen
        name="UserScreen"
        component={UserScreen}
        options={{
          tabBarLabel: '我的',
          tabBarIcon: ({color}) => (
            <Icon type="ionicon" name="person" color={color} size={26} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

export default TabNavigator;
